<template>
  <div class="detail-modal fullscreen" style="height: auto">
    <a-button class="detail-export-btn" type="primary" @click="handleExport">导出</a-button>
    <div :class="['sub_main']">
      <h1 style="text-align: center; font-size: 2em">反走私分析报告</h1>
      <h2 v-html="getResultItem('second')"></h2>

      <div v-html="getResultItem('third')"></div>
      <p v-html="getResultItem('fourth')"></p>

      <p v-html="getResultItem('fifth')"></p>
      <smLine
        v-if="lineOption1.data.length > 0"
        :data="lineOption1.data"
        :color="lineOption1.color"
        yName=""
        legend
        :chartTitle="{ text: lineOption1.text, x: 'center', y: 'top', textStyle: { fontSize: 22 } }"
        class="chartClass"
      />
      <a-empty v-else description="图形无数据" />
      <div data-op-type="new-page"></div>
      <div v-html="getResultItem('sixth')"></div>
      <p v-html="getResultItem('seventh')"></p>
      <p v-html="getResultItem('eighth')"></p>
      <smRankBar
        v-if="lineOption2.data.length > 0"
        :data="lineOption2.data"
        :barWidth="30"
        yName=""
        :chartTitle="{ text: lineOption2.text, x: 'center', y: 'top', textStyle: { fontSize: 22 } }"
        class="chartClass"
      />
      <a-empty v-else description="图形无数据" />
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import smRankBar from '@/components/echarts/smRankBar.vue'
import smLine from '@/components/echarts/smLine.vue'
import exportHandle from '@/utils/export-util/pdf-canvas'
import * as reportApi from '@/api/smuggle/report.js'
import { downLoadMix } from '@/utils/export-util/util'
export default {
  components: {
    smLine,
    smRankBar,
  },
  data() {
    return {
      result: {},
      lineOption1: {
        text: null,
        data: [],
        color: ['#6885F2', '#FB8DCF', '#26CED9', '#FD7171', '#FFD54B', '#FF944C'],
      },
      lineOption2: {
        text: null,
        data: [],
      },
    }
  },
  computed: {
    queryId() {
      const id = this.$route.query.id
      return id
    }
  },
  created() {
    this.queryById()
  },
  methods: {
    moment,
    async queryById() {
      try {
        let res = await reportApi.reportQueryById({ id: this.queryId })
        if (res.success) {
          let result = res.result && Object.keys(res.result).length > 0 ? res.result : {}
          if(result && Object.keys(result).length === 0) return
          const allowed = ['txtData', 'zxtData']
          // 文本
          const filtered = this.filterKeys(result, allowed)
          // 整体发案趋势-折线图
          const zxtData = this.setChartLineData(result.zxtData, 'dataSourceTypeNums', 'dataSourceType', 'dateType', 'dateNum')
          // 海南省各市县反走私区域案件分布情况-柱状图
          const txtData = this.setChartBarData(result.txtData, 'areaType', 'areaNum')
          console.log(txtData)
          this.result = filtered
          this.lineOption1.data = zxtData
          this.lineOption2.data = txtData
        }
      } catch (err) {
        this.$message.warn('请求失败！')
      }
    },
    getResultItem(key) {
      let value = ''
      if (Object.keys(this.result).length > 0 && this.result[key]) {
        value = this.result[key]
      }
      return value
    },
    filterKeys(list, inList) {
      const filtered = Object.keys(list)
        .filter((key) => !inList.includes(key))
        .reduce((obj, key) => {
          obj[key] = list[key]
          return obj
        }, {})
      return filtered
    },
    setChartBarData(list, nameKey, valueKey) {
      let data = []
      data = list.map((item) => {
        return {
          product: item[nameKey],
          '数量': item[valueKey]
        }
      })
      return data
    },
    setChartLineData(list, childKey, labelKey, nameKey, valueKey) {
      let data = [];
      for(let i in list) {
        let obj1 = {product: list[i][nameKey]}
        let obj2 = {}
        list[i][childKey].map(item=> {
          obj2[item[labelKey]] = item[valueKey]
        })
        data[i] = Object.assign({}, obj1, obj2);
      }
      return data
    },
    handleExport() {
      let that = this
      let params = {
        fileList: [this.queryId],
      }
      if (params.fileList.length === 0) {
        this.$message.warn('导出文件不存在！')
        return
      }
      this.$confirm({
        title: `是否确认导出报告？`,
        okText: '确定',
        onOk() {
          // that.onDownload()
          reportApi.exportReport(params).then(async (res) => {
            if (res && res.size > 0) {
              const fileName = '反走私分析报告.zip'
              await downLoadMix(res, fileName)
            } else {
              that.$message.warn('导出失败！')
            }
          })
        },
      })
    },
    onDownload() {
      const reportDate = this.$route.query.reportDate
      this.download(`#reportDetails-${reportDate}`, '反走私分析报告')
    },
    // 下载PDF
    download(DomID, filename) {
      let refDom = document.querySelector(DomID)
      this.$nextTick(() => {
        exportHandle.exportPDF(refDom, filename)
      })
    },
  },
}
</script>
<style lang="less" scoped>
.detail-modal {
  background-color: #fff;
  .detail-export-btn {
    margin: 24px 0 0 24px;
  }
  p {
    font-size: 14px;
    text-indent: 2em;
    color: rgba(0, 0, 0, 0.8);
  }
  .chartClass {
    height: 500px;
    // padding-top: 50px;
    width: 90%;
    margin: 0 auto !important;
    &.h_auto {
      height: auto;
      padding-bottom: 50px;
    }
  }
  .sub_main {
    padding: 24px 24px 0 24px;
    width: 100%;
  }
  /deep/.ant-empty {
    padding-bottom: 30px;
  }
}
</style>
